<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>订单详情</title>
  <!-- <link rel="stylesheet" href="weui.css"/> -->
  <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.0/style/weui.min.css">
  <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.0/css/jquery-weui.min.css">
  <link rel="stylesheet" href="css/common.css">
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <style>
  .order-list {
    display: flex;
    padding-top: 10px;
  }
  
  .order-img {
    flex: 1;
  }
  
  .order-content {
    flex: 4;
  }
  
  .technician-cells {
    float: right;
    color: red;
    font-size: 14px;
    font-weight: 100;
    padding-right: 20px;
  }
  
  .img-list {
    list-style: none;
    width: 100%;
  }
  
  .img-list>li {
    display: inline-block;
    width: 30%;
    text-align: center;
  }
  
  .weui-cell__hd>i {
    padding-right: 15px;
  }
  
  .user-phone {
    float: right;
    padding-right: 20px;
    display: inline-block;
  }
  </style>
</head>

<body>
  <div class="detail-content">
    <div class="weui-cells">
      <div class="weui-cell">
        订单编号: <span class='order-number'>A01-0001-001-000001</span><span class='order-state'>带评价</span>
      </div>
      <div class="weui-cell">
        <p>
          <span>渗透类--</span><span>管道--</span><span>管道</span>
        </p>
      </div>
      <div class="weui-cell">
        <ul class='img-list'>
          <li><img src="img/icon.png" alt=""></li>
          <li><img src="img/icon.png" alt=""></li>
          <li><img src="img/icon.png" alt=""></li>
        </ul>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          我是问题描述我是问题描述我是问题描述我是问题描述
        </div>
      </div>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <i class='fa icon-map-marker'></i>
        </div>
        <div class="weui-cell__bd">
          <p>
            <span class='user-name'>张三</span><span class='user-phone'>12345678909</span>
          </p>
          <p class='user-local'>四川省成都市双流天赋新奇</p>
        </div>
      </div>
    </div>
    <div class="weui-cells">
      <div class="weui-cells__title">技师信息</div>
      <div href="javascript:void(0);" class="order-list">
        <div class="weui-media-box__hd order-img">
          <img class="weui-media-box__thumb" src="img/icon.png" alt="">
        </div>
        <div class="weui-media-box__bd order-content">
          <h4 class="weui-media-box__title">孙强<span class='technician-cells'>1234567890</span></h4>
          <p class="weui-media-box__desc">XX公司</p>
        </div>
      </div>
    </div>
  </div>
  <button class='weui-btn weui-btn_primary width'>评价</button>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>
<script>
</script>

</html>
